<template>
  <div class="horv-sreen-layout">
    <div class="layout-content">
      <div class="layout-content-left">
        <!-- 咨询统计 -->
        <moduleStatistics
          :statistics-hight="statisticsHight"
          v-bind="statisticsDataData"
        ></moduleStatistics>
        <!-- 咨询分布 -->
        <moduleDistribution
          :distribution-hight="distributionHight"
          :distributionTable="distributionTable"
          :title="distributionTitle"
        ></moduleDistribution>
      </div>
      <div class="layout-content-right">
        <!-- 知识库建设 -->
        <moduleKnowledge
          :knowledge-hight="knowledgeHight"
          :knowledgeCount="knowledgeCount"
          :userChartData="userChartData"
        ></moduleKnowledge>
        <!-- 运维工单流转分析 -->
        <moduleWorkOrder
          :workorder-hight="workorderHight"
          :cardData="workOrderCardData"
          :workOrderData="workOrderData"
          :chartType="chartType"
          @change="changeTab"
        ></moduleWorkOrder>
        <!-- 高频问题应用 -->
        <moduleApplication
          :application-hight="applicationHight"
          :applicationData="applicationData"
        ></moduleApplication>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, reactive } from "vue";

import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleStatistics from "./component/app-statistics/index.vue";
import moduleDistribution from "./component/app-distribution/index.vue";
import moduleKnowledge from "./component/app-knowledge/index.vue";
import moduleWorkOrder from "./component/app-workorder/index.vue";
import moduleApplication from "./component/app-application/index.vue";

import {
  getConsultData,
  getDistributionData,
  getKnowageNumData,
  getKnowageData,
} from "@/api/mockApi/cloudResources.js";

import {
  getWorkCardData,
  getWorkBarData,
  getHighFrequencyData,
} from "@/api/mockApi/operationBusiness.js";

import { useRouter } from "vue-router";

const router = useRouter();
// 页面顶部部分
const handleMenu = (item) => {
  router.push({ path: item.path });
};

const chartType = ref("init");
// const buttonGroup = ref([
//   { id: 1, name: "总览", path: "/", disabled: false },
//   { id: 2, name: "基础设施监控", path: "/infrastructure", disabled: false },
//   { id: 3, name: "应用监控", path: "/application", disabled: false },
// ]);

// 页面各个组件高度设置
const statisticsHight = ref("1.92rem");
const distributionHight = ref("7.2rem");
const knowledgeHight = ref("1.92rem");
const knowledgeCount = ref(0);
const workorderHight = ref("3.13rem");
const applicationHight = ref("3.9rem");

const distributionTitle = ref("咨询分布");
const distributionTable = ref([]);
const getDistributionTable = () => {
  getDistributionData().then((res) => {
    distributionTable.value = res.data || [];
    distributionTable.value.map((item, index) => {
      item.xh = index + 1;
    });
  });
};

// 知识库建设柱状图
const userChartData = ref([]);
const knowledgeList = ref([]);
const getUsersBarChart = () => {
  getKnowageNumData().then((res) => {
    knowledgeList.value = res.data || [];
    knowledgeCount.value = knowledgeList.value[0]?.know_num;
  });
  getKnowageData().then((res) => {
    userChartData.value = res.data || [];
  });
};

// 切换卡片
const changeTab = (e) => {
  chartType.value = "update";
  getWorkOrderBarChart({
    type: e,
  });
  // const data = [
  // ];
  // workOrderData.value = data?.map((element) => {
  //   return {
  //     name: element.system_name,
  //     data: {
  //       incomplete: element.ywc,
  //       completed: element.wwc,
  //     },
  //   };
  // });
  // console.log(workOrderData.value);
};

// 运维工单卡片数据
const workOrderCardData = ref({});
const getWorkOrderCardChart = (params = {}) => {
  getWorkCardData().then((res) => {
    workOrderCardData.value = res?.data[0];
  });
};

// 运维工单流转分析柱状图
const workOrderData = ref([]);
const getWorkOrderBarChart = (params = {}) => {
  getWorkBarData(params).then((res) => {
    workOrderData.value = res?.data.map((element) => {
      return {
        name: element.system_name,
        data: {
          incomplete: element.ywc,
          completed: element.wwc,
        },
      };
    });
  });
};

// 高频问题应用
const applicationData = ref([]);
const getApplicationBarChart = () => {
  getHighFrequencyData().then((res) => {
    applicationData.value = res?.data || [];
  });
};

// 咨询统计数据信息
const statisticsDataData = reactive({
  info: {
    num_question: 0,
    num_bjv: 0,
    num_zxcpl: 0,
    num_rg_zxl: 0,
    num_rg_bjl: 0,
    num_rg_zxcpl: 0,
    num_jqr_zxl: 0,
    num_jqr_bjl: 0,
    num_jqr_zccpl: 0,
  },
  chartData: [],
  dataOptions: {
    dvModel: 2, //布局模式
    dvContentStyle: "display:flex;",
    dvMainFontSize: "0.16rem",
    dvMinorFontSize: "0.14rem",
    dvUsealFontSize: "0.14rem",
    dvFontSize: "0.18rem",
  },
  chartOptions: {
    model: "3",
    select: {
      width: 1,
      time: {
        labelWidth: "0.3rem",
      },
      bns: {
        labelWidth: "0.6rem",
      },
      scope: {
        labelWidth: "0.3rem",
      },
    },
    grid: {
      top: 20,
    },
    legendProps: {
      top: 0,
    },
  },
});

const leftData = ref([]);
//获取咨询统计数据
const getConsultDatat = (params = {}) => {
  getConsultData(params).then((res) => {
    leftData.value = res.data || [];
    statisticsDataData.info.num_question = leftData.value[0]?.zxl_total;
    statisticsDataData.info.num_bjv = leftData.value[0]?.bjl;
    statisticsDataData.info.num_zxcpl = leftData.value[0]?.zxcpl;
    statisticsDataData.info.num_rg_zxl = leftData.value[0]?.zxl_total_rg;
    statisticsDataData.info.num_rg_bjl = leftData.value[0]?.bjl_rg;
    statisticsDataData.info.num_rg_zxcpl = leftData.value[0]?.zxcpl_rg;
    statisticsDataData.info.num_jqr_zxl = leftData.value[0]?.zxl_total_jqr;
    statisticsDataData.info.num_jqr_bjl = leftData.value[0]?.bjl_jqr;
    statisticsDataData.info.num_jqr_zccpl = leftData.value[0]?.zxcpl_jqr;
  });
};
onMounted(() => {
  getDistributionTable();
  getConsultDatat();
  getUsersBarChart();
  getApplicationBarChart();
  getWorkOrderCardChart();
  getWorkOrderBarChart({
    type: 1,
  });
  // yyjkzsRequest.startFetching();
});

onBeforeUnmount(() => {
  // yyjkzsRequest.stopFetching();
});
</script>

<style lang="less" scoped>
.layout-content {
  display: flex;
  padding: 0.2rem;
  padding-bottom: 0;
  // padding-right: 0;
  background: #f2f3f5;
  height: 8rem;

  .layout-content-left {
    width: 9.32rem;
    margin-right: 0.16rem;
  }

  .layout-content-right {
    // width: 9.32rem;
    flex: 1;
  }
}
</style>
